<template>
	<!-- 家庭管理页面布局 -->
	<view class="familyLayout">
		<view class="list">
			<!-- 表头 -->
			<view class="row">
				<view class="left">
					<!-- <view class="left1">序号</view> -->
					<view class="left2">家庭名称</view>
					<view class="left3">家庭描述</view>
				</view>
				<view class="right">
					<view class="righttext">管理操作</view>
				</view>
			</view>
			<!-- 循环遍历 -->
			<view class="row" v-for="item in familyList" :key="item.id">
				<view class="left">
					<!-- <view class="left1">{{item.id}}</view> -->
					<view class="left2">{{item.familyName}}</view>
					<view class="left3">{{item.information}}</view>
				</view>
				<view class="right">
					<button type="default" size="mini" @click="update(item.id)">修改</button>
					<button type="warn" size="mini" @click="familyRemove(item.id)">删除</button>
				</view>
			</view>
		</view>
		<view class="saveLayout" v-if="isUpdate">
			<input placeholder="请输入家庭名称" v-model="update_family.familyName" />
			<input placeholder="请输入家庭描述" v-model="update_family.information" />
			<view class="button">
				<button @click="onUpdate">确定</button>
				<button @click="cancelUpdate">取消</button>
			</view>
		</view>
		<view class="saveLayout" v-if="isSave">
			<input placeholder="请输入家庭名称" v-model="newFamily.familyName" />
			<input placeholder="请输入家庭描述" v-model="newFamily.information" />
			<view class="button">
				<button @click="onSave">确定</button>
				<button @click="cancelSave">取消</button>
			</view>
		</view>
		<button class="button" type="primary" @click="save" v-show="!(isSave || isUpdate)">创建新家庭</button>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app"; // 生命周期函数
	import { createFamily, readFamily, updateFamily, deleteFamily } from "@/services/sysFamilyApi";
	import { type Family } from '@/types/family';
	import { getStore } from "@/utils/getToken";

	/**
	 * 新增家庭
	 * 1. 点击创建家庭显示创建页面
	 * 2. 创建家庭时，必须填入家庭名称和家庭描述，户主id从token获得
	 * 3. 创建完成后，刷新ref数据
	 */
	let isSave = ref(false)
	let newFamily = ref<Family>({                      // 渲染前必须先初始化
		sysUserId: getStore('id'),                       // 获取user_id
		familyName: '',
		information: ''
	})
	function save() {                                  // 打开创建窗口点击事件函数
		isSave.value = true
	}
	function cancelSave() {
		isSave.value = false
	}
	function onSave() {                                // 创建家庭点击事件函数    
		createFamily(newFamily.value).then(res => {
			uni.showToast({
				title: res
			})
			getFamily()                                    // 保存成功后,刷新数据
			isSave.value = false
			newFamily.value.sysUserId = 0
			newFamily.value.familyName = ''
			newFamily.value.information = ''
		})
	}

	/**
	 * 逻辑删除家庭
	 * 根据id删除，返回统一的Result.msg
	 * 删除后刷新数据
	 */
	function familyRemove(id : number) {              // 删除数据点击事件函数
		uni.showModal({
			title: "是否确认删除?",
			content: "本删除为逻辑删除",
			cancelColor: "#999",
			confirmColor: "#ff0000",
			success: function (res) {
				if (res.confirm) {
					deleteFamily(id).then(res => {
						uni.showToast({                         // 弹出结果
							title: res
						})
						getFamily()                             // 删除后刷新数据
					})
				}
			}
		})

	}

	/**
	 * 修改家庭信息
	 * 1. 点击修改按钮显示修改界面，获取当前数据
	 * 2. 取消修改的方法，关闭界面，刷新数据
	 * 3. 修改，只允许修改家庭名称和家庭描述，不允许修改id和sysUserId
	 */
	let isUpdate = ref(false)
	let update_family = ref<Family>({                  // 渲染前必须先初始化
		familyName: '',
		information: ''
	});
	function update(familyId : number) {              // 修改数据按钮点击事件的函数
		isUpdate.value = true
		update_family.value = familyList.value.find(item => item.id === familyId)  // 从数组对象中找到id匹配的数据
	}
	function cancelUpdate() {                         // 取消修改按钮点击时间的函数
		isUpdate.value = false
		getFamily()                                     // 取消需要刷新模版层,防止模版层数据已经被更改
	}
	function onUpdate() {
		updateFamily(update_family.value).then(res => {
			uni.showToast({
				title: res.data
			})
			isUpdate.value = false
			getFamily()                                   // 刷新数据
		})
	}

	/**
	 * 查询家庭数据
	 * 根据id查询所有家庭,id数据来自登陆后的token
	 * 生命周期 onShow 时调用一次,之后的增/删/改后都需要调用一次刷新数据
	 */
	let familyList = ref<Family[]>([]);
	async function getFamily() {
		let res =  await readFamily(getStore('id'));
			familyList.value = res.data
	}

	// 生命周期
	onLoad(() => {
		getFamily()
	})
</script>

<style lang="scss" scoped>
	.familyLayout {
		.list {
			width: 730rpx;
			margin: 10rpx auto; // 两个参数 上下/左右
			border: 1px solid#eee;
			border-radius: 15rpx;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
			background-color: #fafafa;

			.row {
				display: flex; // 一个row里面带了2个view，布局方式:弹性布局
				justify-content: space-between; // 左右两端对齐
				height: 100rpx;
				border-bottom: 1px solid#eee;
				align-items: center; // 垂直居中
				text-align: center; // 文字水平居中
				font-size: 28rpx; // 字体大小
				color: #333; // 字体颜色

				&:last-child {
					// 最后一行少一条底线
					border-bottom: 0;
				}

				.left {
					display: flex; // 弹性布局
					padding-left: 5rpx; // 内边距

					.left1 {
						width: 60rpx;
					}

					.left2 {
						width: 150rpx;
					}

					.left3 {
						width: 300rpx;
					}
				}

				.right {
					display: flex;
					align-items: center;
					padding-right: 5rpx;

					.righttext {
						margin-right: 60rpx;
					}

					button {
						margin-right: 10rpx;
					}
				}
			}
		}

		.button {
			margin: 40rpx 120rpx; //两个参数 上下/左右
			height: 80rpx;
		}

		.saveLayout {
			position: fixed; // 显示在屏幕的固定位置,并不随屏幕滚动
			top: 700rpx; // 距离屏幕顶部的距离
			width: 730rpx;
			margin: 10rpx auto; // 两个参数 上下/左右
			border: 1px solid#eee;
			border-radius: 15rpx;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
			background-color: #fff; // 添加背景色,并且不透明

			input {
				margin: 40rpx 20rpx; // 外边距，两个参数(上下/左右)
				padding: 2rpx 20rpx 2rpx 20rpx; // 内边距（上/右/下/左）
				height: 80rpx;
				box-shadow: 5rpx 5rpx 10rpx rgba(0, 201, 249, 0.6); // 边框阴影(x轴便宜/y轴便宜/模糊半径)
				border: 1rpx solid #ccc; // 边框宽度/颜色
				border-radius: 20rpx; // 圆角
			}

			.button {
				display: flex; // 弹性布局
				justify-content: center; // 垂直居中
				align-items: center;
				margin: 50rpx;
			}
		}
	}
</style>